<template>
	<view class="page2" ref="page">
		<view class="top">
			<view class="search-index" style="z-index: 99999;">
				<view class="search" @click="onSearch">
					<input type="text" placeholder="商品搜索" />
					<icon type="search" size="19" />
				</view>
			</view>
			<view style="position: relative;">
				<uv-scroll-list :indicator=false @right="right" @left="left">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in list[0].goods" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">
							<image class="scroll-list__goods-item__image br" :src="item.image"></image>
							<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
						</view>
					</view>
				</uv-scroll-list>
				<view class="scroll-list__show-more" @click="popup.open()">
					<view class="scroll-list__show-more__text">展开</view>
					<uv-icon name="list-dot" size="12"></uv-icon>
				</view>
				<uv-popup custom-style="top:80px" :closeOnClickOverlay=false :safeAreaInsetBottom=false ref="popup" mode="top"
					@change="change">
					<view class="nav-list-more">
						<view style="gap: 9px;display: grid;grid-template-columns: repeat(5,1fr);margin: 10px;">
							<block v-for="(item, index) in list[0].goods" :key="index">
								<view class="item tc cr-base cp text-size-xss" :id="'one-nav-item-' + index" :data-index="index"
									:data-itemtwoindex="-1" :data-itemthreeindex="-1" @tap="popup.close()">
									<view
										:class="'icon-content circle br auto ' + (nav_active_index == index ? 'border-color-main' : '')">
										<image :src="item.image" mode="aspectFill" class="icon dis-block auto wh-auto  circle"></image>
									</view>
									<view class="dis-inline-block padding-left-sm padding-right-sm round margin-top-xs ">
										{{ item.price }}
									</view>
								</view>
							</block>
						</view>
						<view class="tc padding-vertical-lg"
							style="padding: 10px 0;border-top: 1px solid #eeeeee;display: flex;justify-content: center;gap: 10px;"
							@click="popup.close()">
							<text class="padding-right-sm">点击收起</text>
							<uv-icon name="arrow-up"></uv-icon>
						</view>
					</view>
				</uv-popup>
			</view>
		</view>
		<view class="classify-data">
			<view class="classify-one">
				<scroll-view :scroll-top="LscrollTOP" scroll-y class="classify-list">
					<view class="list" v-for="(item,index) in classify" :class="{'action':index===action}" @click="action = index"
						:key="index">
						<text>{{item}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="classify-two-three">
				<scroll-view refresher-enabled=true refresher-threshold=0 refresher-default-style="none"
					@refresherrefresh="refresherrefresh" scroll-y class="scroll" :scroll-top="scrollTOP" @scroll="scroll">
					<view class="classify-two">
						<uv-swiper height="80" v-if="list[action].swiper?.length" :list="list[action].swiper" indicator
							indicatorMode="line" circular></uv-swiper>
						<uv-tabs v-if="list[action].tabs?.length" lineColor="#17b022" activeStyle="color:#17b022"
							:list="list[action].tabs">
							<template v-slot:right>
								<view style="padding-left: 4px;" @tap="toast">
									<uv-icon name="list" size="21" bold></uv-icon>
								</view>
							</template>
						</uv-tabs>
						<view class="classify-three">
							<view class="list" v-for="val,i in list[action].goods" :key="i">
								<image :src="val.image" mode="aspectFill">
								</image>
								<view class="content">
									<text class="two-omit">{{val.title}}</text>
									<text class="money">
										<text>￥</text>
										<text class="center">{{val.price}}</text>
										<text>.00</text>
									</text>
									<view class="bottom">
										<text class="discount">￥76.8</text>
										<view class="right">
											<template v-if="val.num">
												<text class="jian" @click="--val.num">-</text>
												<text class="number">{{val.num}}</text>
											</template>
											<text class="jia" @click="++val.num">+</text>
										</view>
									</view>
								</view>
							</view>
							<view v-if="action != list.length -1" class="two-name" style="padding-bottom: 6rem;font-size: 0.8rem;"
								@touchend="goTop()">
								上滑查看下一分类
							</view>
							<view class="two-name" style="padding-bottom: 6rem;font-size: 0.8rem;" v-else>
								已经到底了~
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="close-account">
			<view class="check-total">
				<view class="check" @click="toskip">
					<image src="https://api.jtwsz.cn/storage/images/20241121/b4dad4c47e491afbf71f67b48c18655b.png" mode="">
					</image>
					<view class="circle" v-if="list.flat().filter((v)=>v.num)?.length">
						<uv-badge type="error" :value="list.flat().filter((v)=>v.num)?.length"></uv-badge>
					</view>
				</view>
				<view class="total">
					<text>总计：</text>
					<text class="price">￥{{total}}</text>
				</view>
			</view>
			<view class="account">
				<view class="btn-calculate" @click="onConfirm">
					<text>去结算</text>
				</view>
			</view>
		</view>
	</view>
	<uv-loading-page :loading="load" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		computed,
		ref,
		watch,
		defineComponent,
		onMounted
	} from 'vue';
	const load = ref(false)
	const action = ref(0)
	const nav_active_index = ref(0)
	const popup = ref()
	const scrollTOP = ref(0)
	const LscrollTOP = ref(0)
	const oldScrollTop = ref(0)
	const popupShow = ref()
	const total = computed(() =>
		list.map((v) => v.goods).flat().filter((v) => v.num).reduce((pre, cur) => {
			return pre + cur.price * cur.num
		}, 0))
	const classify = reactive(['精选水果', '肉制品', '水产海鲜', '米面粮油', '厨房主食', '新鲜蛋品', '调味剂', '日配冷藏', '豆制品'])
	const image = reactive(['https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp',
		'https://gd-hbimg.huaban.com/1154c597eccf64151bc6f4c6ac7cd6e5c5bc8fd06cc21-o6ssiP_fw658webp',
		'https://gd-hbimg.huaban.com/small/407d5e1b6feb4f20879936831aa57aba53ef852419e2a5-SQnJ33_fw240webp',
		'https://gd-hbimg.huaban.com/ab5bfe7be7ae62af744fe503425b728b46068e7f5987b-53Kr6t_fw240webp',
		'https://gd-hbimg.huaban.com/3c5969d8056956dd8f73238a7f8d3c64893405d91e626-P886vU_fw658webp',
		'https://gd-hbimg.huaban.com/small/91b649d04a5ef6504f29e4b9b0b9af6b005177bbe8c4e-t0FZuY_fw240webp',
		'https://gd-hbimg.huaban.com/cb46f32b6c71d063b81086edbf173fe76cf44d0893ea6-hD6yZb_fw240webp',
		'https://gd-hbimg.huaban.com/b64b196f942284ff4fcc31c7b5b380665ebfa7321f2503-Fq6xu7_fw240webp',
		'https://gd-hbimg.huaban.com/a99889190a94e35324441713a67833737d5706082c1434-rF3ooo_fw658webp'
	])
	const list = reactive([{
			goods: [{
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}, {
				title: "小黄鸭儿童鞋2022夏季女童运动鞋男童透气网鞋断JFK小黄鸭儿童",
				image: "https://gd-hbimg.huaban.com/6a2af0a2b17da822ddadb87e9330b3988a7054b8681da-AyKWTS_fw658webp",
				num: 0,
				price: '999'
			}],
			swiper: [
				'https://gd-hbimg.huaban.com/d5f9d59d3129d475758434906b14d7adfe2a246323483f-ToFmxv_fw658webp',
				'https://gd-hbimg.huaban.com/e83d3422e695edb54ae1d7d99d6d723dc0409bfa53ea8-BzbrsE_fw658webp'
			],
			tabs: [{
				name: '全部'
			}, {
				name: '水果礼盒'
			}, {
				name: '精选果切'
			}, {
				name: '特色水果'
			}, {
				name: '时令鲜果'
			}, {
				name: '时令鲜花'
			}]
		},
		{
			goods: [],
			swiper: []
		},
		{
			goods: [],
			swiper: [
				'https://gd-hbimg.huaban.com/b4dad6750c3a3a5576b6abf764dd7159cfa100cff5326-dy5gA6_fw658webp',
				'https://gd-hbimg.huaban.com/37f7eb27b6c908529be096b51c459535512d2cea4fc7e0-ddqQqw_fw658webp'
			]
		},
		{
			goods: [],
			swiper: []
		},
		{
			goods: [],
			swiper: [],
			tabs: [{
				name: '全部'
			}, {
				name: '水果礼盒'
			}, {
				name: '精选果切'
			}, {
				name: '特色水果'
			}, {
				name: '时令鲜果'
			}, {
				name: '时令鲜花'
			}]
		},
		{
			goods: [],
			swiper: [
				'https://gd-hbimg.huaban.com/143be0268436b987b4e6de8b38108c75991c7816557d2-yohvXf_fw658webp',
				'https://gd-hbimg.huaban.com/6551a8c23e22355a856a4d902a408c4f9449722a48325-K2Fq2v_fw658webp'
			]
		}, {
			goods: [],
			swiper: []
		},
		{
			goods: [],
			swiper: []
		}, {
			goods: [],
			swiper: []
		}, {
			goods: [],
			swiper: []
		},
	])

	onMounted(() => {
		popup.value.open()
	})

	watch(action, (newvalue) => {
		scrollTOP.value = oldScrollTop.value;
		nextTick(() => {
			scrollTOP.value = 0;
			LscrollTOP.value = newvalue * 20
		})
		if (list[newvalue]?.goods.length == 0) {
			list[0].goods.forEach((v) => {
				list[newvalue].goods.push({
					...v,
					num: 0,
					image: image[newvalue]
				})
			})
		}
	})
	const scroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop
	}
	const goTop = (e) => {
		if (action.value != 9) {
			action.value = ++action.value
		}
	}
	const refresherrefresh = (e) => {
		if (action.value != 0) {
			action.value = --action.value
		}
	}
	const onSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const toskip = () => {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}
	const onConfirm = () => {
		load.value = true
		setTimeout(function() {
			load.value = false
		}, 2000);
	}
</script>

<style scoped lang="scss">
	@import 'classify.scss'
</style>